import Image from "next/image";
import Link from "next/link";

export default function Root() {
  return (
    <main className="">

      <div className="mt-16 relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
        <Image
          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
          src="/next.svg"
          alt="Next.js Logo"
          width={540}
          height={74}
          priority
        />
        <p className="text-9xl  text-transparent bg-clip-text bg-gradient-to-r from-blue-500 via-teal-500 to-pink-500">
          &nbsp;
          14
        </p>
      </div>

      <Link // href="wxx"
        href="/demo/route-api"
      >
        <h2 className="mt-8 text-center text-4xl text-gray-400">
          {/* What is new */}
          <span className="font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 via-teal-500 to-pink-500">
            API & route file
          </span>
        </h2>
      </Link>

    </main>
  );
}
